<!doctype html>
<head>
		<title>css3的齿轮</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
			*{margin:0;padding:0;}
			body {font:14px/1.3 Arial,sans-serif;}
			header {background-color:#212121;box-shadow: 0 -1px 2px #111111;color:#fff;display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
header a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
header .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {

height: 548px;
margin: 30px auto;
width: 450px;
position:relative;
}

/* CSS3 keyframes */
@-webkit-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}

/* gears */
.gear {
float: none;
position: absolute;
text-align: center;

-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;

-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#gear1 {
background: url('images/g1.png') no-repeat 0 0;
height: 85px;
left: 31px;
top: 45px;
width: 85px;

-moz-animation-name: ckw;
-moz-animation-duration: 10s;

-webkit-animation-name: ckw;
-webkit-animation-duration: 10s;
}
#gear2 {
background: url('images/g2.png') no-repeat 0 0;
height: 125px;
left: 105px;
top: 10px;
width: 125px;

-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;

-webkit-animation-name: cckw;
-webkit-animation-duration: 16.84s;
}
#gear3 {
background: url('images/g3.png') no-repeat 0 0;
height: 103px;
left: 149px;
top: 118px;
width: 103px;

-moz-animation-name: ckw;
-moz-animation-duration: 13.5s;

-webkit-animation-name: ckw;
-webkit-animation-duration: 13.5s;
}
#gear4 {
background: url('images/g4.png') no-repeat 0 0;
height: 144px;
left: 46px;
top: 173px;
width: 144px;

-moz-animation-name: cckw;
-moz-animation-duration: 20.2s;

-webkit-animation-name: cckw;
-webkit-animation-duration: 20.2s;
}
#gear5 {
background: url('images/g1.png') no-repeat 0 0;
height: 85px;
left: 127px;
top: 292px;
width: 85px;

-moz-animation-name: ckw;
-moz-animation-duration: 10s;

-webkit-animation-name: ckw;
-webkit-animation-duration: 10s;
}
#gear6 {
background: url('images/g2.png') no-repeat 0 0;
height: 125px;
left: 200px;
top: 283px;
width: 125px;

-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;

-webkit-animation-name: cckw;
-webkit-animation-duration: 16.84s;
}
#gear7 {
background: url('images/g3.png') no-repeat 0 0;
height: 103px;
left: 277px;
top: 217px;
width: 103px;

-moz-animation-name: ckw;
-moz-animation-duration: 13.5s;

-webkit-animation-name: ckw;
-webkit-animation-duration: 13.5s;
}
		</style>
</head>
<body>
	<div class="container">
		<div class="gear" id="gear1"></div>
		<div class="gear" id="gear2"></div>
		<div class="gear" id="gear3"></div>
		<div class="gear" id="gear4"></div>
		<div class="gear" id="gear5"></div>
		<div class="gear" id="gear6"></div>
		<div class="gear" id="gear7"></div>
	</div>
</body>
</html>